
<template>
	<view class="proxy-page">
		<loading-view v-if="showLoading"></loading-view>

		<view class="header" v-if="!showLoading">
			<view class="user-info row">
				<view class="user-avatar">
					<custom-image width="100%" height="100%" round :src="userInfo.user.avatar" />
				</view>
				<view class="user-message-container column ml20 white">
					<view class="row mb10">
						<view class="xxl bold" style="line-height: 50rpx">{{userInfo.user.nickname}}</view>
						<view class="row" v-if="applyInfo.type">
							<image class="avatar-tag" :src="applyInfo.type.image" mode="heightFix">
							</image>
							<!-- <text class="ml10">{{applyInfo.type.name}}</text> -->
						</view>
					</view>
					<view class="xs row" style="line-height: 30rpx;text-align: left;">
						我的邀请人：{{!inviteStatus ? '无' : userInfo.leader.nickname}}
						<view v-if="!inviteStatus" class="br60 white write-btn row-center" @tap="showInvitePop">填写
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="main" v-if="!showLoading">
			<view class="user-vip">
				<view class="user-assets-box">
					<view class="box-header">
						<view class="column-center" style="color: #E37265;flex: 0 0 120rpx;">
							<image src="../../static/images/agent_store.png" mode="widthFix" style="width: 40rpx;">
							</image>
							<view class="xs mt10">代理区域</view>
						</view>
						<view style="width: 3rpx;height: 60rpx;background-color: #e5e5e5;"></view>
						<view class="text" style="#333">{{applyInfo.address}}</view>
						<view style="width: 3rpx;height: 60rpx;background-color: #e5e5e5;"></view>
						<view>
							<u-icon @click="choosePosit(applyInfo.address)" name="map-fill" color="var(--primary-color)"
								size="36"></u-icon>
						</view>
					</view>
					<view class="user-assets-content row wrap">
						<view class="user-item column-center">
							<view class="nr user-assets-name row" style="color: #8F430E">
								今日预估收益
							</view>
							<view class="assets mt20">
								<price-format weight="bold" :showSubscript="true" :firstSize="36" :subscriptSize="26"
									:secondSize="36" :price="today_earnings" color="##524334" />
							</view>
						</view>
						<view class="user-item column-center">
							<view class="nr user-assets-name row" style="color: #8F430E">
								本月预估收益
								<!-- <u-icon class="ml10" name="question-circle" size="30rpx" color="#D88D5A" /> -->
							</view>
							<view class="assets mt20">
								<price-format weight="bold" :showSubscript="true" :firstSize="36" :subscriptSize="26"
									:secondSize="36" :price="month_earnings" color="##524334" />
							</view>
						</view>
						<view class="user-item column-center">
							<view class="nr user-assets-name row" style="color: #8F430E">
								累计获得收益<!-- <u-icon class="ml10" name="question-circle" size="30rpx" color="#D88D5A" /> -->
							</view>
							<view class="assets mt20">
								<price-format weight="bold" :showSubscript="true" :firstSize="36" :subscriptSize="26"
									:secondSize="36" :price="history_earnings" color="##524334" />
							</view>
						</view>
					</view>
				</view>
				<view class="mt20 fans-msg-box row bg-white md">
					<navigator url="/bundle/pages/user_fans/user_fans" hover-class="none"
						class="my-fans row-center normal">
						我的粉丝 <span class="primary ml10">{{userInfo.fans || 0}}</span>
						<u-icon class="ml10" name="arrow-right" size="28rpx" color="#666" />
					</navigator>
					<view class="line"></view>
					<navigator url="/bundle/pages/invite_fans/invite_fans" hover-class="none"
						class="invite-fans row-center normal">
						邀请粉丝
						<u-icon class="ml10" name="arrow-right" size="28rpx" color="#666" />
					</navigator>
				</view>
				<view class="withdrawal-box">
					<view class="title">待提现（元）</view>
					<view class="content">
						<view class="value">{{able_withdrawal}}</view>
						<navigator url="/bundle/pages/user_withdraw/user_withdraw" class="btn">去提现</navigator>
					</view>
				</view>
				<view class="usual-tools-box bg-white mt20">
					<view class="usual-tools-header row lg bold">
						我的服务
					</view>
					<view class="usual-content row">
						<block v-for="(item,index) in menuList" :key="index">
							<navigator v-if="item.link_type==1" hover-class="none" :url="item.link"
								class="usual-item column-center">
								<image :src="item.image" class="usual-item-img"></image>
								<view class="nr normal mt20" style="line-height: 40rpx">{{item.name}}</view>
							</navigator>
							<view v-else-if="item.link_type == 3 && item.name=='取件核销'" @tap="toScan"
								class="usual-item column-center">
								<image :src="item.image" class="usual-item-img"></image>
								<view class="nr normal mt20" style="line-height: 40rpx">{{item.name}}</view>
							</view>
						</block>
					</view>
				</view>
			</view>
		</view>
		<u-popup v-model="showPop" @close="onClose" mode="center" border-radius="30">
			<view class="inviteformContain column-center">
				<view class="title xl">填写邀请人</view>
				<view class="input-row row">
					<view style="width: 140rpx;">邀请码：</view>
					<input :value="inviteCode" @input="onInput" placeholder="请输入邀请码" />
				</view>
				<view class="btn bg-primary white row-center" @tap="inputInviteCodeFun">确定</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		inputInviteCode,
		applyVip,
		getInviteInfo,
		getPromoteHome,
		getDistributionScan,
		postAgentStoreLat
	} from "@/api/user";

	import {
		getMenu
	} from '@/api/store.js'

	export default {
		data() {
			return {
				showLoading: true,
				// 弹窗展示
				showPop: false,
				inviteCode: '',
				userInfo: {
					user: {},
					leader: {}
				},
				// 邀请人状态
				inviteStatus: false,

				able_withdrawal: 0,
				history_earnings: 0,
				month_earnings: 0,
				today_earnings: 0,

				menuList: [],
			};
		},

		components: {},
		props: {},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			this.showLoading = true
			this.getPromoteHomeFun()

			getMenu({
				type: 3
			}).then(res => {
				if (res.code != 1) return;
				this.menuList = res.data
			})
		},

		computed: {
			applyInfo() {
				return this.userInfo.apply
			}
		},

		methods: {
			choosePosit(address) {
				this.QQMAPSDK.geocoder({
					address: address,
					success: res => {
						uni.chooseLocation({
							latitude: res.result.location.lat,
							longitude: res.result.location.lng,
							success: res2 => {
								console.log(res2)
								if (res2.errMsg == 'chooseLocation:ok') {
									postAgentStoreLat({
										lat: res2.latitude,
										lng: res2.longitude
									}).then(res3 => {
										if (res3.code != 1) return;
										this.$toast({
											title: '更新位置成功'
										})
									})
								}
							},
							fail: err => {
								console.log(err)
								this.$toast({
									title: '选择失败'
								})
							}
						})
					},
					fail: err => {
						console.log(err)
						this.$toast({
							title: '腾讯地图接口发生错误，请联系开发人员'
						})
					}
				})
			},
			toScan() {
				uni.scanCode({
					onlyFromCamera: false,
					scanType: ['qrCode'],
					success: function({
						result
					}) {
						getDistributionScan({
							ma: result
						}).then(res => {
							if (res.code != 1) return uni.showToast({
								icon: 'none',
								title: res.msg
							})
							uni.showToast({
								icon: 'none',
								title: "核销成功！"
							})
						})
					},
					fail() {
						uni.showToast({
							icon: 'none',
							title: '扫码失败'
						})
					}
				})
			},
			onInput(e) {
				this.inviteCode = e.detail.value
			},

			// 申请成功数据
			getPromoteHomeFun() {
				getPromoteHome().then(res => {
					if (res.code == 1) {
						if (res.data.apply && res.data.apply.status == 1) {
							this.showLoading = false;
						} else return uni.showModal({
							content: res.data.apply?.status_str,
							showCancel: false,
							success: function(res) {
								uni.navigateBack({
									delta: 9
								})
							}
						})
						if (res.data.leader.length <= 0) {
							this.inviteStatus = false;
						} else {
							this.inviteStatus = true;
						}
						this.userInfo = res.data;
						this.able_withdrawal = res.data.able_withdrawal
						this.history_earnings = res.data.history_earnings
						this.month_earnings = res.data.month_earnings
						this.today_earnings = res.data.today_earnings
					}
				});
			},


			// 填写邀请码
			inputInviteCodeFun() {
				inputInviteCode({
					code: this.inviteCode
				}).then(res => {
					this.$toast({
						title: res.msg
					})
					if (res.code == 1) {
						this.showPop = false
						this.getInviteInfoFun();
					}
				});
			},

			showInvitePop() {
				this.showPop = true;
			},

			// 获取邀请人信息
			getInviteInfoFun() {
				getInviteInfo().then(res => {
					if (res.code == 1) {
						if (res.data.leader.length <= 0) {
							this.userInfo = res.data;
							this.inviteStatus = false
						} else {
							this.userInfo = res.data;
							this.inviteStatus = true
						}
					}
				});
			},


			onClose() {
				this.showPop = false;
			},

		}
	};
</script>
<style lang="scss">
	@import "index.scss";
</style>